<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>网上申报第一步</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/app.css">
		<style>
			.mui-bar-nav~.mui-content{padding:0;margin-top:45px;background:#f5f5f5;}
	        /*头部*/
	       .online_top{width:100%;background:#fff;padding:1rem 0 .1rem 0;}
	       .online_top_cont{width:6.35rem;margin:0 auto;overflow:hidden;}
	       .online_top_cont>img{width:5.5rem;margin:0 .42rem;}
	       .title_list{width:100%;float:left;}
	       .title_list>a{display:block;width:1.2rem;text-align:center;margin-right:.5rem;font-size:.28rem;color:#999;float:left;line-height:.5rem;}
	       .title_list>a:last-child{margin:0;}
	       .title_list>.actives{color:#333;}
	       /*主内容*/
	       .online_cont{width:100%;float:left;position:absolute;top:3.2rem;left:0;height:9.9rem;overflow:auto;}
	       .online_cont>h5{width:100%;float:left;height:.80rem;line-height:.86rem;color:#999;font-size:.32rem;font-weight:normal;margin: .05rem 0;}
		   .online_cont>h5>img{width:.35rem;height:.35rem;float:left;margin:.23rem .1rem 0 .25rem;}
		   .online_lint{width:100%;background:#fff;padding:.3rem .6rem;float:left;}
		   .online_lint>ul{width:100%;float:left;margin:0;padding:0;}
		   .online_lint>ul>li{width:100%;float:left;overflow:hidden;line-height:.4rem;font-size:.28rem;margin-bottom:.1rem;}
		   .online_lint_second{color:#2a558a;}
		   .menu_btn{position:fixed;height:1rem;background:#fff;width:100%;position:fixed;bottom:0;left:0;}
		   .menu_btn>.mui-btn-primary{width:6rem;margin:.15rem .75rem;height:.68rem;font-size:.32rem;}
		</style>
	</head>

	<body>
		<!--公共头部-->
		<div class="mui-bar mui-bar-nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">网上申报</h1>
		</div>
		<div class="mui-content" id="content">
		    <div class="online_top">
		    	<div class="online_top_cont">
		    		<img src="../../../images/work/line_one.png">
		    		<div class="title_list">
		    			<a class="actives">阅读须知</a>
		    			<a>信息填报</a>
		    			<a>材料上传</a>
		    			<a>申报告知</a>
		    		</div>
		    	</div>
		    </div>
		    <div class="online_cont">
		    	 <h5><img src="../../../images/work/slcl-@2x.png">受理条件</h5>
		    	 <div class="online_lint" id="vue_conditions">
		    	 	<ul >
		    	 		<li v-for="(condition , index) in conditions">{{index+1}}、{{condition}}；</li>
		    	 	</ul>
		    	 	<center v-if="none"><span>暂无数据</span></center>
		    	 </div>
		    	 <h5><img src="../../../images/work/sltj-@2x.png">申请材料</h5>
		    	 <div class="online_lint online_lint_second" id="vue_materies">
		    	 	<ul >
		    	 		<li v-for="(mater,index) in materialList">
		    	 			{{index+1}}、{{mater.materName}}
	    	 				({{mater.paperNumber}}份)；
		    	 		</li>
		    	 	</ul>
		    	 	<center v-if="none"><span>不需要提交材料</span></center>
		    	 </div>
		    </div>
		</div>
		<br />
	    <div class="menu_btn">
			<a id="nextStep"  type="button" class="mui-btn mui-btn-primary">下一步</a>
		</div>
		<script type="text/javascript">
			var my_immersed = function(immersed) {
				document.getElementById("header").style.paddingTop = immersed + 'px';
				document.getElementById("header").style.height = (immersed + 44)+'px';
				//document.getElementById("content").style.paddingTop = (immersed + 44) + 'px';
			}
		</script>
		<script type="text/javascript" src="../../../js/immersed.js"></script>
		<script type="text/javascript" src="../../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../../js/common.js"></script>
		<script type="text/javascript" src="../../../js/app.js"></script>
		<script type="text/javascript" src="../../../js/vue.min.js" ></script>
		<script>
			(function(mui){
				mui.init();
				var conditionVue = new Vue({
					el:"#vue_conditions",
					data:{
						conditions:[],
						none:false
					}
				})
				var materiesVue = new Vue({
					el:"#vue_materies",
					data:{
						materialList:[],
						none:false
					}
				})
				mui.plusReady(function(){
					mui.back = function(){
						plus.webview.currentWebview().close()
					}
					var serviceId = plus.webview.currentWebview().serviceId;
					if(serviceId){
						closeWaitingAndShowView(); 
						initNetCase(serviceId);
						//预加载
						if(setp2view)setp2view.close();
						var setp2view = mui.preload({
							url:'_www/src/work/netCase/caseRegStep2.html',
							id:'netCase/caseRegStep2',
							extras:{serviceId:serviceId}
						})
						//跳转到第二步
						document.getElementById("nextStep").addEventListener('tap',function(){
							setp2view.show('slide-in-right',300)
						})
					}else{
						mui.toast("未知错位");
						mui.back();
					}
				})
				//获取须知
				var initNetCase = function(serviceId){
					var url = "appNetCase/initNetCase.do?serviceId="+(serviceId?serviceId:"");
					utils.ajax(url,function(data){
						data = JSON.parse(data);
						if(data.state == 1){
							if(data.conditionlist && data.conditionlist.length >0){
								conditionVue.conditions = data.conditionlist;
							}else{
								conditionVue.none = true;
							}
							if(data.materialList && data.materialList.length>0){
								materiesVue.materialList = data.materialList
							}else{
								materiesVue.none = true;
							}
						}else{
							mui.toast(data.msg?data.msg:'访问遇到错误');
							mui.back();
						}
					},null,{showWait:true})
				}
			}(mui))
		</script>
	</body>

</html>
